<template>
	
	<view class="container ">


		<uni-section title="今日计划" type="line">
			
			<view class="example">
				<!-- 动态表单校验 -->
				<uni-forms ref="dynamicForm" :modelValue="dynamicFormData">
					<!-- <uni-forms-item label="1">
						<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
					</uni-forms-item> -->
					<uni-forms-item v-for="(item,index) in dynamicLists" :key="item.id" 
						 :rules="item.rules" :name="'domains[' + item.id + ']'">
						<view class="form-item">
							<uni-easyinput v-model="dynamicFormData.domains[item.id]" :placeholder="item.label+' '+index" />
							<button class="button" size="mini" type="default" @click="del(item.id)">已完成</button>
							<button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="button-group">
					<button type="primary" size="mini" @click="add">新增计划</button>
					<button type="primary" size="mini" @click="submit('dynamicForm')">提交</button>
				</view>
			</view>
		</uni-section>
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">   Cheems,写下你的计划，今天的计划完成后，咱们去整点薯条！</text>
		</uni-card>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				
				// 分段器数据
				current: 0,
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
				},
				
				dynamicFormData: {
					email: '',
					domains: {}
				},
				dynamicLists: []
			}
		},
		computed: {
			// 处理表单排列切换

		},
		onLoad() {},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			// this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			onClickItem(e) {
				console.log(e);
			},
			add() {
				this.dynamicLists.push({
					label: '请输入计划',
					rules: [{
						'required': true,
						errorMessage: '计划项必填'
					}],
					id: Date.now()
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>
<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>